<template>
  <div class="cart-page">
    <van-nav-bar title="购物车" />
    
    <!-- 空购物车 -->
    <div v-if="cartStore.isEmpty" class="empty-cart">
      <van-empty description="购物车是空的" />
      <van-button type="primary" @click="goToHome">去逛逛</van-button>
    </div>
    
    <!-- 购物车列表 -->
    <div v-else class="cart-content">
      <van-checkbox-group v-model="selectedIds">
        <div class="cart-items">
          <div 
            v-for="item in cartStore.cartItems" 
            :key="item.id" 
            class="cart-item"
          >
            <van-checkbox 
              :name="item.id" 
              :checked="item.selected"
              @change="(checked) => toggleSelect(item.id, checked)"
            />
            <div class="item-content">
              <img :src="item.img" :alt="item.title" class="item-image" />
              <div class="item-info">
                <div class="item-title">{{ item.title }}</div>
                <div class="item-price">¥{{ item.price }}</div>
                <van-stepper 
                  v-model="item.count" 
                  @change="(value) => updateCount(item.id, value)"
                  min="1"
                />
              </div>
              <van-button 
                type="danger" 
                size="small" 
                @click="removeItem(item.id)"
              >
                删除
              </van-button>
            </div>
          </div>
        </div>
      </van-checkbox-group>
      
      <!-- 底部结算栏 -->
      <div class="cart-footer">
        <div class="select-all">
          <van-checkbox 
            v-model="selectAll"
            @change="toggleSelectAll"
          >
            全选
          </van-checkbox>
        </div>
        <div class="total-info">
          <div class="total-price">
            合计: <span class="price">¥{{ cartStore.selectedPrice.toFixed(2) }}</span>
          </div>
          <div class="total-count">
            已选 {{ cartStore.selectedCount }} 件
          </div>
        </div>
        <van-button 
          type="primary" 
          :disabled="cartStore.selectedCount === 0"
          @click="checkout"
        >
          结算({{ cartStore.selectedCount }})
        </van-button>
      </div>
    </div>
    
    <!-- 底部导航 -->
    <tab-bar />
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { useRouter } from 'vue-router'
import { showConfirmDialog, showToast } from 'vant'
import { useCartStore } from '@/stores/cart'
import TabBar from '@/components/tab-bar/index.vue'

const router = useRouter()
const cartStore = useCartStore()

// 选中的商品ID列表
const selectedIds = ref([])

// 全选状态
const selectAll = computed({
  get: () => {
    return cartStore.cartItems.length > 0 && 
           cartStore.cartItems.every(item => item.selected)
  },
  set: (value) => {
    cartStore.toggleSelectAll(value)
  }
})

// 监听选中状态变化
watch(() => cartStore.cartItems, (items) => {
  selectedIds.value = items.filter(item => item.selected).map(item => item.id)
}, { deep: true, immediate: true })

// 切换选中状态
const toggleSelect = (itemId, checked) => {
  cartStore.toggleSelect(itemId)
}

// 切换全选
const toggleSelectAll = (checked) => {
  cartStore.toggleSelectAll(checked)
}

// 更新数量
const updateCount = (itemId, count) => {
  cartStore.updateCount(itemId, count)
}

// 删除商品
const removeItem = async (itemId) => {
  try {
    await showConfirmDialog({
      title: '确认删除',
      message: '确定要删除这个商品吗？'
    })
    cartStore.removeFromCart(itemId)
    showToast('删除成功')
  } catch {
    // 用户取消删除
  }
}

// 去首页
const goToHome = () => {
  router.push('/home')
}

// 结算
const checkout = () => {
  if (cartStore.selectedCount === 0) {
    showToast('请选择要结算的商品')
    return
  }
  
  router.push({
    path: '/order',
    query: { from: 'cart' }
  })
}
</script>

<style lang="scss" scoped>
.cart-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 50px;
}

.empty-cart {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  
  .van-button {
    margin-top: 20px;
  }
}

.cart-content {
  .cart-items {
    background: #fff;
    margin: 10px;
    border-radius: 8px;
  }
  
  .cart-item {
    display: flex;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    .item-content {
      flex: 1;
      display: flex;
      align-items: center;
      margin-left: 10px;
      
      .item-image {
        width: 80px;
        height: 80px;
        object-fit: cover;
        border-radius: 4px;
        margin-right: 15px;
      }
      
      .item-info {
        flex: 1;
        
        .item-title {
          font-size: 14px;
          color: #333;
          margin-bottom: 5px;
          line-height: 1.4;
        }
        
        .item-price {
          font-size: 16px;
          font-weight: bold;
          color: #ff6b6b;
          margin-bottom: 10px;
        }
      }
    }
  }
}

.cart-footer {
  position: fixed;
  bottom: 50px;
  left: 0;
  right: 0;
  background: #fff;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
  
  .select-all {
    flex: 1;
  }
  
  .total-info {
    flex: 2;
    text-align: right;
    margin-right: 15px;
    
    .total-price {
      font-size: 14px;
      color: #333;
      
      .price {
        font-size: 18px;
        font-weight: bold;
        color: #ff6b6b;
      }
    }
    
    .total-count {
      font-size: 12px;
      color: #999;
      margin-top: 2px;
    }
  }
  
  .van-button {
    flex: 1;
    max-width: 120px;
  }
}
</style> 